<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/swazam.css">
    <script src="lib/jquery.js"></script>
    <script src="lib/bootstrap.js"></script>
    <script src="lib/jquery.tmpl.js"></script>
    <script src="js/swazam.js"></script>
    <meta charset=utf-8/>
    <title>SWAzam</title>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="span8 offset2">
            <div class="panel" style="background-color:#4BB5C1;">
                <div class="panel-heading" style="height:250px;"><img src="images/music.png" class="pull-left"/>

                    <h1 style="font-size:150px;">SWAzam</h1></div>
                <div style="margin-left:50px;margin-right:50px;" id="mainContent">
                    <div class="panel pull-left mainPanel" style="width:500px;" id="homescreen">
                        <div id="homeContent1" style="padding-left:10px;padding-right:10px;font-size:32px;">
                            <p class="text-left">Identify music around you</p>
                            <br/>

                            <p class="text-right">- it's simple &amp; fast</p>
                        </div>
                        <div id="homeContent2" style="padding-left:10px;padding-right:10px;font-size:24px;height:295px">
                            <p class="text-left">Get in touch!</p>
                            <br/>

                            <p class="text-right">Find people sharing your music flavour!</p>
                        </div>
                        <div id="homeContent3" style="font-size:28px;">
                            <p class="text-left">Benefit from your music library</p>
                            <br/>

                            <p class="text-right">Earn coins by identifying other's music</p>
                        </div>
                    </div>
                    <div class="panel mainPanel" style="margin-left:600px;padding:10px" id="sessionPanel">
                        <center>
                            <h3>MySWAzam Music Portal</h3>
                            <br/>

                            <p>
                                <button type="button" class="btn btn-primary btn-lg" style="width:90%"
                                        data-toggle="modal" data-target="#loginModal"><span
                                        class="glyphicon glyphicon-headphones"></span> Goto MySWAzam
                                </button>
                            </p>
                            <br/>
                            <br/>
                            <br/>
                            <button type="button" class="btn btn-default btn-lg" style="width:90%" data-toggle="modal"
                                    data-target="#registerModal"><span class="glyphicon glyphicon-pencil"></span> Not
                                registered yet? Sign up here, it's free!
                            </button>
                        </center>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="navbar-fixed-bottom">
    <center>&copy; Bernhard Nickel, Gregor Schauer, Dominik Strasser - SWA WS2013</center>
</div>

<!-- modal dialogs -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Login to MySWAzam</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputLoginUsername" class="col-sm-2 control-label">Username</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputLoginUsername" placeholder="Username">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputLoginPassword" class="col-sm-2 control-label">Password</label>

                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputLoginPassword" placeholder="Password">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="loginButton"><span
                        class="glyphicon glyphicon-hand-right"></span> Login
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Create an account</h4>
            </div>
            <div class="modal-body">
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputRegisterUsername" class="col-sm-2 control-label">Username</label>

                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputRegisterUsername"
                                       placeholder="Username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputRegisterPassword" class="col-sm-2 control-label">Password</label>

                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputRegisterPassword">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputRegisterPasswordRepeat" class="col-sm-2 control-label">Repeat</label>

                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputRegisterPasswordRepeat">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputRegisterFirstname" class="col-sm-2 control-label">Firstname</label>

                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputRegisterFirstname">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputRegisterLastname" class="col-sm-2 control-label">Lastname</label>

                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputRegisterLastname">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"><span
                            class="glyphicon glyphicon-hand-right" id="signupButton"></span> Signup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="profileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">MySWAzam Profile</h4>
                </div>
                <div class="modal-body" id="profileData">
                    <div class="progress progress-striped active">
                        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                             aria-valuemax="100" style="width: 100%">
                            fetching profile data
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- templates -->
        <script type='text/x-jquery-tmpl' id='mySWAzamTemplate'>
            <div class="pull-right">
                <button class="btn btn-primary" id="profileButton"><span class="glyphicon glyphicon-user"></span>
                    Welcome ${firstname} ${lastname}
                </button>
                <button class="btn btn-primary" id="logoutButton"><span class="glyphicon glyphicon-off"></span> Logout
                </button>
            </div>
            <div class="clearfix"></div>
            <div class="panel" style="padding:10px;min-height:300px">
                <div class="panel panel-primary pull-left" style="width:550px">
                    <div class="panel-heading"><span class="glyphicon glyphicon-thumbs-up"></span> That's hot at the
                        moment
                    </div>
                    <div style="width:100%" id="trackStream">
                        <p style="padding:10px;">Loading Stream...</p>
                    </div>
                </div>
                <div class="panel panel-primary pull-right" style="width:400px">
                    <div class="panel-heading"><span class="glyphicon glyphicon-download"></span> Get SWAzam</div>
                    <img src="images/googleplay.png"/><img src="images/applestore.png"/> | Windows
                </div>
                <div class="panel panel-primary pull-right" style="width:400px">
                    <div class="panel-heading"><span class="glyphicon glyphicon-comment"></span> Messages</div>
                    You have no new messages in your inbox
                </div>
            </div>
        </script>

        <script type='text/x-jquery-tmpl' id='profileTemplate'>
            <table>
                <tr>
                    <td>Name:</td>
                    <td>${firstname} ${lastname}</td>
                </tr>
                <tr>
                    <td>Username:</td>
                    <td>${username}</td>
                </tr>
                <tr>
                    <td>Member since:</td>
                    <td>${since}</td>
                </tr>
                <tr>
                    <td>Credits:</td>
                    <td>${credits}</td>
                </tr>
            </table>
        </script>

        <script type='text/x-jquery-tmpl' id='trackTemplate'>
            {{each tracks}}
            <div class="trackElement">
                <span class="song"><span class="glyphicon glyphicon-music"></span> ${artist} - ${title}</span>
                <span class="buyButton"><img src="images/amazon.png" title="Buy this song at amazon"/></span>
            </div>
            {{/each}}
        </script>

</body>
</html>
